<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* div {
      width: 300px;
      height: 200px;
      border: 1px solid #000;
    }
    .box2 {
      position: absolute;
      right: 0;
      bottom: 0;
    } */

    div {
      width: 500px;
      height: 400px;
      border: 1px solid #000;
      margin: 50px auto;
      position: relative;
    }
    
    .bg {
      width: 100%;
      height: 100%;
    }

    .icon {
      position: absolute;
      left: 30px;
      top: 50%;
      margin-top: -11px;
    }

    .icon2 {
      position: absolute;
      right: 30px;
      top: 50%;
      margin-top: -11px;
    }

    section {
      position: absolute;
      width: 100%;
      height: 40px;
      left: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.4);
      color: #fff;
      line-height: 40px;
    }

    /* .father {
      width: 500px;
      height: 400px;
      border: 1px solid #000;
      margin: 50px auto;
      position: relative;
    }
    .son {
      position: absolute;
      top: 50px;
      bottom: 50px;
      left: 50px;
      right: 50px;
      background-color: red;
    } */
  </style>
</head>
<body>
  <!-- <div class="box1">box1</div>
  <div class="box2">box2</div>
  <div class="box3">box3</div> -->

  <div>
    <img src="../day01/images/1.jpg" alt="" class="bg">
    <img src="../day05/images/icon.jpg" alt="" class="icon">
    <img src="../day05/images/icon.jpg" alt="" class="icon2">
    <section>哈哈哈哈</section>
  </div>

  <!-- <div class="father">
    <div class="son"></div>
  </div> -->
</body>
</html>

<!-- 
  绝对定位

    position：absolute；	绝对定位
      绝对定位会脱离文档流，不占据之前的空间
      绝对定位的元素的默认的坐标不是在参照物的top0left0的位置，而是在自己原先的位置

      绝对定位的参照物就是离他最近的那个且带有定位的父元素
      没有没有就一直到浏览器窗口

      坐标的值可以是负数
      top: 0;left: 0;right: 0;bottom: 0;margin: auto;可以做元素的水平垂直居中
 -->